<!-- 面板 -->
<template>
  <div>
    <div class="row">
      <div class="col-12">
        <div id="pie" style="width: 100%; height: 400px"></div>
      </div>
      <div class="col-12 mt-30">
        <div id="hot" style="width: 100%; height: 400px"></div>
      </div>
    </div>
  </div>

</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      async getViews() {
        var res = await this.$api.core.getDocumentViews()
        if (res.code == 20000) {
          var datas = [];
          var names = [];
          for(const t of res.data) {
            datas.push(t.views);
            names.push(t.title)
          }
          this.hot(names,datas)
        }
      },
      async getPie() {
        var res = await this.$api.core.getTagsCount()
        if (res.code == 20000) {
          var p = [];
          for(const t of res.data) {
            p.push({value:t.userid,name:t.name})
          }
          this.pie(p)
        }
      },
      hot(names,datas) {
        var chartDom = document.getElementById('hot');
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          color: ['#00DDFF', '#37A2FF', '#FF0087',],
          title: {
            text: '热度图',
            subtext: '参考-单篇文章',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
          },
          yAxis: {
            type: 'category',
            inverse: true,
            data: names
          },
          series: [{
              name: '访问量',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: datas
            }
          ]
        };

        option && myChart.setOption(option);
      },
      line() {
        var chartDom = document.getElementById('line');
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF'],
          title: {
            text: '活力热图',
            subtext: '参考-用户喜好',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['阅读量', '点赞', '评论']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '阅读量',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [140, 232, 101, 264, 90, 340, 250]
            },

          ]
        };

        option && myChart.setOption(option);

        // End
      },
      pie(item) {
        var chartDom = document.getElementById('pie');
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '文章分类圆饼图',
            subtext: '参考-博客标签',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [{
            name: '文章数量',
            type: 'pie',
            radius: '50%',
            data: item,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };

        option && myChart.setOption(option);

      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      var that = this;
          setTimeout( ()=>{ //延时加载echarts初始化函数
        that.getPie();
      that.getViews();
      that.line();
      },100)
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>
</style>
